<template>
    <el-container id="app">
        <el-aside width="200px">
            <div style="color: white;display: flex;flex-direction: column;margin-bottom: 20px;">
                <div style="font-size: large;">互动人像墙</div>
                <div style="font-size: x-small;">Face Lumina</div>
            </div>
            <el-menu default-active="2" class="el-menu-vertical-demo" style="border:0;" background-color="#030E4C"
                text-color="#8694C6" @select="handleSelectInSonBar">
                <span v-for="item in navArr" :key="item.id">
                    <el-submenu :index="item.id" v-if="item.hasSon">
                        <template slot="title">
                            <div style="width:100%;height:100%;display: flex;align-items: center;">
                                <!-- <i class="el-icon-location"></i> -->
                                <span>{{ item.content }}</span>
                            </div>
                        </template>
                        <el-menu-item-group v-for="sonItem in item.sonNavs" :key="sonItem.id">
                            <el-menu-item :index="sonItem.id" style="display:flex;font-size: x-small;">{{ sonItem.content
                            }}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item :index="item.id" v-else style="display: flex;align-items: center;">
                        <!-- <i class="el-icon-menu"></i> -->
                        <span slot="title">{{ item.content }}</span>
                    </el-menu-item>
                </span>
            </el-menu>
        </el-aside>
        <el-main style="position: absolute;left: 190px;height: 100%;width: calc(100% - 190px);">
            <router-view></router-view>
        </el-main>
    </el-container>
</template>
  
<script>
import request from "../axios/request";
export default {
    data() {
        return {
            navArr: [],
        }
    },
    methods: {
        handleSelectInSonBar(index) {
            let name = null
            let content = null
            console.log(index);
            switch (index) {
                case '1':
                    name = "UserManage"
                    break;
                case '3':
                    name = "windowsSetting"
                    break;
                case '4':
                    name = "contentSetting"
                    break;
                case '5':
                    name = "systemSetting"
                    break;
            }
            this.$router.push({
                name: name,
                params: {
                    content: content,
                },
            });
        },
        async getNavInfo() {
            let resOfGettingNavBtn = await request({
                url: "/api/Nav/getNavBtn/-1",
                method: "GET",
            });
            this.navArr = resOfGettingNavBtn.data.data
        }
    },
    created() {
        this.getNavInfo()
    },

}
</script>
  
<style scoped>
#app {
    width: 100%;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
}

.el-aside {
    background-color: #030E4C;
    color: #333;
    text-align: center;
    padding: 10px;
    overflow-x: hidden;
    /* display: none; */
    /* line-height: 200px; */
}

.el-main {
    background-color: white;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
    border-radius: 10px 0 0 10px;
}
</style>
  